import React  ,{useState,useEffect,useImperativeHandle}from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import * as service from "../../api/index"
import { useNavigate } from 'react-router-dom'
import { connect } from 'react-redux';
import { useDispatch } from 'react-redux'

interface Props{
  Ff: (id:number) => void;
    // onRef: any
   Newarr:any
}
interface StoreStateProps {     //给仓库里面的数据添加ts限制
  recod:{}
  token: string,

}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
 }


function Banjian_List (props:Props) {
  var dispatch = useDispatch()
  var navigate = useNavigate();
 

  //   useImperativeHandle(props.onRef,()=>{
  //   return {
  //     setlist:setlist
  //   }

  // })
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'serial',
      key: 'serial',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'ID',
      dataIndex: 'BS',
      key: 'BS',
    },
    {
      title: '咨询标题',
      dataIndex: 'headline',
      key: 'headline',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '提出时间',
      dataIndex: 'time1',
      key: 'time1',
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
    },
    {
      title: '指定时间',
      dataIndex: 'time2',
      key: 'time2',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={  () => { deletes(record) } }>回复</a>
          <a onClick={()=>{tiao(record)}}>查看</a>
          <a onClick={() => { pingjia(record) }}>去评价</a>
          <a onClick={() => { delets(record) }}>删除</a>
        </Space>
      ),
    },
  ];
  //删除
  const delets=async(record:any)=>{
    console.log("删除", record)
    var res= await service.Zixun_delete( {id: record.id})
    console.log(res)
    list()
  }


  //去评价
     //去评价
  //去评价
     //去评价
     const pingjia=async (record:any)=>{
      console.log(record)
      // navigate("/ZixunPingjia")
      console.log(   props.Ff)
      props.Ff(record.id)

     }

   //回复
   const deletes=(record:any)=>{
         console.log("回复", record)
         navigate("/reply/"+record.id)
        //  dispatch({ type:'SET_RECOD',payload: record})
   }

  const tiao=(record:any)=>{
    console.log(record)
    console.log("咨询")
    navigate("/ZixunXinxi/"+record.id)
  }


  var [list2, setlist] = useState([]);
  const list= async ()=>{
      var res= await service.Zixun_list()
      console.log(res.data)
      setlist(res.data)
     
  }
  useEffect(()=>{
    setlist(props.Newarr)
    
  },[props.Newarr])
  useEffect(()=>{
      list()
  },[])
    const data: DataType[] = [
      
      ];
      
    return (
        <div>
            <Table columns={columns} dataSource={list2} />;
        </div>
    );
}



export default connect(
  (state: StoreStateProps) => { //将store中的数据映射到组件的props中
    return {
      recod:state.recod,
      token: state.token,
  
    }
  },
  (dispatch) => { //将函数映射到组件的props中, 映射的每个函数都可以通过dispatch触发action
    return {
      sub() {
      
      }
    }
  }
)(Banjian_List);;